<template>
    <view :style="objColor">
        <!-- mine/pages/refundDetails/refundDetails.wxml -->
        <view class="detail1">
            <view class="title">
                <image v-if="recordDetail.refundRoad == 'WeChatPay'" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/refund_wx.png" class="img"></image>
                <view>{{ recordDetail.refundRoad == 'WeChatPay' ? '微信' : recordDetail.refundRoad == 'Alipay' ? '支付宝' : recordDetail.refundRoad }}</view>
            </view>
            <view class="money">{{ recordDetail.balance }}</view>
            <view class="type1" v-if="recordDetail.checkStatus == 'Approve'">退款成功</view>
            <view class="type2" v-if="recordDetail.checkStatus == 'AwaitingApproval' || recordDetail.checkStatus == 'AwaitingReApproval'">审核中</view>
            <view class="type2" v-if="recordDetail.checkStatus == 'DisApprove'">退款失败</view>
            <view class="type2" v-if="recordDetail.checkStatus == 'HangIn'">挂起中</view>
        </view>
        <view class="detail2">
            <view class="info">
                <view class="label">商户单号</view>
                <view class="value">{{ recordDetail.serialNumber }}</view>
            </view>
            <view class="info">
                <view class="label">交易单号</view>
                <view class="value">{{ recordDetail.auditOpinion }}</view>
            </view>
            <view class="info">
                <view class="label">退款单号</view>
                <view class="value">{{ recordDetail.refundBus }}</view>
            </view>
            <view class="info">
                <view class="label">备注信息</view>
                <view class="value">{{ recordDetail.remark ? (recordDetail.remark == 'undefined' ? '暂无' : recordDetail.remark) : '暂无' }}</view>
            </view>
        </view>
        <view class="doubt">
            如有疑问请查看<text @tap="showExplainFun">退款说明</text>或直接<text @tap="showCustomerFun">联系客服</text>
        </view>
        <u-popup mode="center" :round="20" :show="showExplain" @close="onCloseExplain">
            <view class="explain" style="padding:46rpx 32rpx 32rpx;width:702rpx;box-sizing: border-box;">
                <view class="title">退款说明</view>
                <rich-text :nodes="recordDetail.refundInstruction"></rich-text>
                <!-- <view class="txt">1.个人账户充值余额才可申请退款；</view>
      <view class="txt">2.冻结金额不可退款，解冻后可退；</view>
        <view class="txt">3.已使用优惠券的整单充值金额不可退款；</view>
          <view class="txt">4.已使用奖励金的整单充值金额不可退款；</view>
            <view class="txt">5.参加活动获得的赠送金额、奖励金额不可退款；</view>
<view class="txt">6.退款申请成功后，将原路退还。</view> -->
                <view class="pupBtn" @tap="onCloseExplain">我知道了</view>
            </view>
        </u-popup>
        <u-popup mode="center" :round="16" :show="showCustomer" @close="onCloseCustomer">
            <view style="padding:80rpx 60rpx 60rpx;width:680rpx;box-sizing: border-box;">
                <view class="info">联系客服：{{ recordDetail.customerTelephone }}</view>
                <view class="info">工作时间：{{ recordDetail.customerServiceTime }}</view>
                <view class="customerBtn">
                    <view class="btn1" @tap="onCloseCustomer">取消</view>
                    <view class="btn2" @tap="call">呼叫</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
	'use strict';

	// exports.__esModule = true; // mine/pages/refundDetails/refundDetails.ts

	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
		},
		data() {
			return {
				showExplain: false,
				showCustomer: false,
				refundId: 0,
				recordDetail: {
					refundRoad: '',
					balance: '',
					checkStatus: '',
					serialNumber: '',
					auditOpinion: '',
					refundBus: '',
					remark: false,
					refundInstruction: '',
					customerTelephone: '',
					customerServiceTime: ''
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			if (options.refundId) {
				this.refundId = options.refundId
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
			this.getRefundRecordById();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function () {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function () {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {},
		methods: {
			getRefundRecordById: function () {
				var that = this;
				https_1
					.refundRecordById({
						refundId: this.refundId
					})
					.then(function (res) {
						if (res.code == 0) {
							var data = res.data;
							data.balance = (data.balance / 100).toFixed(2);
							that.recordDetail = data
						}
					});
			},

			// 退款说明
			showExplainFun: function () {
				this.showExplain= true
			},

			onCloseExplain: function () {
				this.showExplain= false
			},

			showCustomerFun: function () {
				this.showCustomer= true
			},

			onCloseCustomer: function () {
				this.showCustomer= false
			},

			//客服电话
			call:async function () {
				this.showCustomer = false
				//#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
					if (result !== 1){
						return
					}else{
						uni.makePhoneCall({
							phoneNumber: this.recordDetail.customerTelephone
						});
					}    
				//#endif
				//#ifdef MP-WEIXIN
					uni.makePhoneCall({
						phoneNumber: this.recordDetail.customerTelephone
					});
				//#endif
			}
		}
	};
</script>
<style lang="less">
    @import url('./refundDetails.less');
    /* mine/pages/refundDetails/refundDetails.wxss */
</style>
